<template>

  <el-card shadow="never">
    <el-row justify="space-between">
      <el-col :span="18" :xs="24">
        <div style="display:flex; align-items:center;">
          <el-avatar :src="store.state.avatar" :size="80"/>
          <div style="margin-left:20px;">
            <div style="margin-bottom:15px;">{{ greetings }}</div>
            <small style="color:gray;">今日天气晴朗，气温在15℃至25℃之间，东南风。</small>
          </div>
        </div>
      </el-col>

      <el-col :span="6" :xs="24">
        <div style="display:flex; align-items:center; justify-content:space-around; height:100%;">
          <el-statistic :value="99">
            <template #title>
              <el-icon :size="20" color="#50dcb6"><ChatDotSquare/></el-icon>
              <span>消息</span>
            </template>
          </el-statistic>
          <el-statistic :value="50">
            <template #title>
              <el-icon :size="20" color="#ff8f41"><AlarmClock/></el-icon>
              <span>待办</span>
            </template>
          </el-statistic>
          <el-statistic :value="10">
            <template #title>
              <el-icon :size="20" color="#69adf4"><Histogram/></el-icon>
              <span>项目</span>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </el-card>

  <!-- 数据卡片 -->
  <el-row :gutter="10" style="margin-top:0.75rem;">
    <el-col :lg="6" :sm="12" :xs="24" v-for="item in cardData">
      <el-card shadow="never">
        <template #header>
          <div style="display:flex; align-items:center; justify-content:space-between;">
            <span style="color:#909399;">{{ item.title }}</span>
            <el-tag :type="item.tagType">{{ item.tagText }}</el-tag>
          </div>
        </template>
        <div style="display:flex; align-items:center; justify-content:space-between; margin-top:1rem;">
          <div class="text-lg text-right">
            {{ Math.round(item.count) }}
          </div>
          <el-icon :size="20" color="#f15bb5">
            <component :is="item.iconClass"/>
          </el-icon>
        </div>
        <div style="display:flex; align-items:center; justify-content:space-between; margin-top:1rem; font-size:0.875rem; color:#909399;">
          <span> {{ item.dataDesc }} </span>
          <span> {{ Math.round(item.count * 15) }} </span>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <el-card shadow="never" style="margin-top:0.75rem;">
    <div id="chart01" style="width: 100%;height: 300px;"></div>
  </el-card>

</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import store from "@/store"
import * as echarts from 'echarts'

// 问候语
const greetings = computed(() => {
  const hours = new Date().getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + store.state.nick + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + store.state.nick + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + store.state.nick + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

// 卡片数量
const cardData = ref([
  {
    title: "访客数",
    tagType: "primary",
    tagText: "日",
    count: 2000,
    dataDesc: "总访客数",
    iconClass: "UserFilled",
  },
  {
    title: "IP数",
    tagType: "success",
    tagText: "日",
    count: 2000,
    dataDesc: "总IP数",
    iconClass: "Location",
  },
  {
    title: "销售额",
    tagType: "warning",
    tagText: "月",
    count: 2000,
    dataDesc: "总销售额",
    iconClass: "CreditCard",
  },
  {
    title: "订单量",
    tagType: "danger",
    tagText: "季",
    count: 2000,
    dataDesc: "总订单量",
    iconClass: "ShoppingBag",
  },
]);

// 初始化图表
const initChart01 = () => {
  // 基于准备好的dom，初始化echarts实例
  let chart01 = echarts.init(document.getElementById('chart01'))
  // 指定图表的配置项和数据
  let option = {
    title: {
      text: ''
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['广西', '广东', '上海', '北京', '境内', '境外']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {color: '#666EE8'}
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  chart01.setOption(option);
  // 当窗口大小变化时重置chart的大小
  window.onresize = () => {
    chart01.resize()
  }
}

onMounted(() => {
  initChart01()
})
</script>

<style scoped>

</style>
